<template>
    <div class="manage">
        <!-- 弹出的对话框 -->
        <el-dialog
            :title="operateType === 'add' ? '详情' : '详情'"
            :visible.sync = "isShow"
        >
            <!-- <common-form
                :formLabel="operateFormLabel"
                :form="operateForm"
                :inline="true"
                ref="form"
            > </common-form> -->
            <div class="host-info">
                <p v-for="(val,key) in detailInfo" :key="key"> {{key+':'}}<br><br><span>{{val}}</span> <br><br><br><br></p>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 搜索框 -->
        <div class="manage-header">    
            <common-form
                :formLabel="formLabel"
                :form="searchFrom"
                :inline="true"
                ref="form"
            >
                <el-button type="primary" @click="searchLog(searchFrom.keyword,true)">搜索</el-button>
            </common-form>
        </div>

        <!-- 表格区域 -->
        <common-table
            :tableData="tableData"
            :tableLabel="tableLabel"
            :config="config"
            @changePage="getList()"
            @edit="viewDetails"
            @del="delLog"
        ></common-table>

    </div>
</template>

<script>

import CommonForm from '../../src/components/CommonForm.vue'
import CommonTable from '../../src/components/CommonTable.vue'
import { getData } from '../../api/data.js'
import Cookies from "js-cookie";




export default {
    name: 'log',

    components: {
        CommonForm,
        CommonTable
    },

    data () {
        return {
            // 当前操作状态是新增还是编辑
            operateType: 'add',
            // 对话框是否显示
            isShow: false,

            // 搜索框
            formLabel: [
                {
                    model: "keyword",
                    label: '',
                    type: 'input'
                }
            ],
            searchFrom:{
                keyword: ''
            },

            // 表格信息
            dataCookie: [],
            tableData: [],
            tableLabel: [
                {
                    prop:  "time",
                    label: '发生时间',
                    width: '180px'
                },
                {
                    prop:  "priority",
                    label: '优先级'
                },
                {
                    prop:  "output",
                    label: '输出信息',
                    width: '1000px'
                },
            
            ],
            config: {
                page: 1,
                total: 30
            },

            detailInfo: {}
        }
    },
    methods: {
        confirm(){
            this.isShow = false
            return
        },
        addUser(){
            this.isShow = true
            this.operateType = 'add'
            this.operateForm = {
                range: '',
                matchField: '',
                matchMethod: '',
                matchContent: ''
            }
        },


        getList(){
        
            // 如果搜索框有东西 则不直接获取数据
            if(this.searchFrom.keyword != '')    return this.searchLog(this.searchFrom.keyword)

            console.log(this.config.page)
            this.config.loading = true
            
            // 获取总页数
            this.$http.post('http://43.138.136.88:3007/my/getCount',
                null,
                {headers:{'Authorization' : Cookies.get('token')}}
            )
            .then(res => {
                this.config.total = res.data.message
                this.config.loading = false

            })

            // 获取当前页数据
            this.$http.post('http://43.138.136.88:3007/my/getLog',
                'page='+this.config.page,
                {headers:{
                    'Content-Type' : 'application/x-www-form-urlencoded',
                    'Authorization' : Cookies.get('token')
                }}
            )
            .then( res => {
                if(res.data.status == 0) {
                    // 把请求回来的数据缓存在前端 处理后在前端输出
                    let tableData = []
                    let outputData = res.data.message
                    // this.dataCookie = data.tableData
                    console.log(res.data.message)
                    for(let i=0;i<=outputData.length-1;++i){
                        let data = {}
                        data["id"] = outputData[i]["id"]
                        data["time"] = outputData[i]["time"].substring(0,10) + ' ' + outputData[i]["time"].substring(11,19)
                        data["priority"] = outputData[i]["priority"]
                        data["output"] = outputData[i]["output"]
                        data["rule"] = outputData[i]["rule"]
                        data["source"] = outputData[i]["source"]
                        data["fields"] = JSON.stringify(outputData[i]["output_fields"])
                        tableData.unshift(data)
                    }   
                    this.tableData = tableData

                }            
            })
        },


        // 查看详细信息
        viewDetails(row) {
            let detail = {}
            detail["发生时间"] = row.time
            detail["优先级"] = row.priority
            detail["信息源"] = row.source
            detail["规则"] = row.rule
            detail["输出信息"] = row.output
            detail["输出属性"] = row.fields
            this.detailInfo = detail
            this.isShow = true
        },

        // 删除记录
        delLog(row) {
            this.$confirm("此操作将永久删除此组件,是否继续？","提示",{
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                const id = row.id   

                this.$http.post('http://43.138.136.88:3007/my/deleteLog',
                    'id='+id,
                    {
                        headers:{
                        'Content-Type' : 'application/x-www-form-urlencoded',
                        'Authorization' : Cookies.get('token')
                        }
                    }
                )
                .then((res) => {
                    console.log(row.id)
                    if(res.data.status == 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.tableData.filter(l => l.id !== row.id)
                        this.getList()
                    }
                    else{
                      this.$message.warning('删除失败！')
                    }
                })
                
            })
        },
        searchLog(regex,first=''){
            // 搜索框没东西
            if(regex == '')   return this.getList()
            this.config.loading = true
            // 如果是点击搜索按钮调用的本函数则跳转到第一页
            if(first)   this.config.page = 1; 
            
            // 按正则搜索
            this.$http.post('http://43.138.136.88:3007/my/searchLog',
                'regex='+regex+'&'+'page='+this.config.page,
                {headers:{
                    'Content-Type' : 'application/x-www-form-urlencoded',
                    'Authorization' : Cookies.get('token')
                }}
            )
            .then(res => {
                console.log(res.data.message)
                if(res.data.status == 0){
                    // 先更新总页数
                    this.config.total = res.data.total
                    console.log('total: '+this.config.total)
                    this.config.loading = false

                    // 再更新当前页数据
                    let tableData = []
                    let outputData = res.data.message
                    for(let i=0;i<=outputData.length-1;++i){
                        let data = {}
                        data["id"] = outputData[i]["id"]
                        data["time"] = outputData[i]["time"].substring(0,10) + ' ' + outputData[i]["time"].substring(11,19)
                        data["priority"] = outputData[i]["priority"]
                        data["output"] = outputData[i]["output"]
                        data["rule"] = outputData[i]["rule"]
                        data["source"] = outputData[i]["source"]
                        data["fields"] = JSON.stringify(outputData[i]["output_fields"])
                        tableData.unshift(data)
                    }   
                    this.tableData = tableData

                }
            })



        }
    },
    created(){
        console.log(this.config.total)
        this.getList()
    }
}

</script>


<style lang="less" scoped>
    .manage-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
</style>